<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <meta name="author" content="纪德朝">
    <title>千图网首页</title>
    <link rel="stylesheet" href="base.css">
    <link rel="stylesheet" href="index.css">
</head>
<body>
    <!--导航栏  -->
    <nav class="nav">
        <div class="container nav-container">
            <ul class="nav-left">
                <li class="active"><a href="#">首页</a></li>
                <li><a href="#">所有分类</a></li>
                <li><a href="#">设计创意</a></li>
                <li><a href="#">办公新意</a></li>
                <li><a href="#">···</a></li>
            </ul>
            <ul class="nav-right">
                <li class="vip"><a href="#">VIP中心</a></li>
                <li class="login"><a href="#">请登录</a></li>
                <li class="register"><a href="#">免费注册</a></li>
            </ul>
        </div>
    </nav>
    <div class="container">
        <header>
            <a href="#"><img src="img/1.png" alt=""></a>
            <ul>
                <li class="search-list">
                    <a href="#">全站</a>
                    <input type="text" placeholder="800万免费设计素材任意下">
                    <a href="#"><span></span></a>
                </li>
                <li class="search-info">
                    热门搜索：
                    <a href="#">你好</a>
                    <a href="#">你好</a>
                    <a href="#">你好</a>
                    <a href="#">你好</a>
                    <a href="#">你好</a>
                    <a href="#">你好</a>
                    <a href="#">你好</a>
                    <a href="#">你好</a>
                    <a href="#">你好</a>
                    <a href="#">你好</a>
                    <a href="#">你好</a>
                    <a href="#">你好</a>
                </li>
            </ul>
        </header>
    </div>
    <!--轮播图  -->
    <div class="banner">
        <div class="container banner-info">
            <ul class="img-list">
                <li class="current"><a href="#"><img src="img/banner01.jpg" alt=""></a></li>
                <li><a href="#"><img src="img/banner02.jpg" alt=""></a></li>
                <li><a href="#"><img src="img/banner03.jpg" alt=""></a></li>
                <li><a href="#"><img src="img/banner04.jpg" alt=""></a></li>
                <li><a href="#"><img src="img/banner05.jpg" alt=""></a></li>
                <li><a href="#"><img src="img/banner06.jpg" alt=""></a></li>
                <li><a href="#"><img src="img/banner07.jpg" alt=""></a></li>
                <li><a href="#"><img src="img/banner08.jpg" alt=""></a></li>
            </ul>
            <ul class="indicator">
                <li class="active"><a href="#"></a></li>
                <li><a href="#"></a></li>
                <li><a href="#"></a></li>
                <li><a href="#"></a></li>
                <li><a href="#"></a></li>
                <li><a href="#"></a></li>
                <li><a href="#"></a></li>
                <li><a href="#"></a></li>
            </ul>
            <a href="#" class="prev"></a>
            <a href="#" class="next"></a>
        </div>
    </div>



    <script src="index.js"></script>
</body>
<script>

</script>
</html>